Skip to content

fix(MessageList): set width on message list scroll container#3077

Merged
oliverlaz merged 1 commit intomasterfrom
fix/message-list-scroll-width
Mar 30, 2026
Merged

fix(MessageList): set width on message list scroll container#3077
oliverlaz merged 1 commit intomasterfrom
fix/message-list-scroll-width

Conversation

@oliverlaz
Copy link
Copy Markdown
Member

🎯 Goal

.str-chat__message-list-scroll is a flex child inside .str-chat__message-list (which uses display: flex; justify-content: center), but it had no width set β€” so it shrink-wrapped its content instead of filling the available space up to its max-width.

πŸ›  Implementation details

  • Added width: 100% to .str-chat__message-list-scroll in MessageList.scss so it expands to fill the parent, capped by the existing max-width
  • Removed the now-redundant width: 100% override from the vite example app's index.scss

🎨 UI Changes

No visual change in the vite example app (which already had the workaround). Other consumers that didn't apply their own override will now see the message list correctly fill the available width.

`.str-chat__message-list-scroll` is a flex child inside a centered flex
parent but had no width set, causing it to shrink-wrap its content
instead of filling available space up to its max-width.
@github-actions
Copy link
Copy Markdown

Size Change: 0 B

Total Size: 621 kB

ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.32 kB
dist/cjs/emojis.js 2.96 kB
dist/cjs/index.js 237 kB
dist/cjs/mp3-encoder.js 1.27 kB
dist/cjs/WithAudioPlayback.js 45.5 kB
dist/css/emoji-replacement.css 456 B
dist/css/index.css 47.3 kB
dist/es/audioProcessing.mjs 1.31 kB
dist/es/emojis.mjs 2.47 kB
dist/es/index.mjs 235 kB
dist/es/mp3-encoder.mjs 756 B
dist/es/WithAudioPlayback.mjs 45.3 kB

compressed-size-action

@oliverlaz oliverlaz merged commit 3f09362 into master Mar 30, 2026
8 checks passed
@oliverlaz oliverlaz deleted the fix/message-list-scroll-width branch March 30, 2026 14:04
github-actions bot pushed a commit that referenced this pull request Mar 31, 2026
## [14.0.0-beta.5](v14.0.0-beta.4...v14.0.0-beta.5) (2026-03-31)

### Bug Fixes

* assorted UI/UX fixes (Giphy, polls, dialogs, composer, headers) ([#3081](#3081)) ([6c06e04](6c06e04))
* close CSS gaps, fix ChannelList dialog portal, and clean up icons ([#3079](#3079)) ([a47981f](a47981f))
* **Icons:** sync icon catalog with refreshed Line SVGs ([#3080](#3080)) ([9472f7b](9472f7b))
* **MessageList:** set width on message list scroll container ([#3077](#3077)) ([3f09362](3f09362))
* post-review `MessageReactionsDetail` adjustments ([#3082](#3082)) ([a82bdcb](a82bdcb))
* use link icon for link-type attachments ([#3083](#3083)) ([241209e](241209e))

### Features

* **examples:** add RTL direction toggle to vite example app ([#3084](#3084)) ([887a326](887a326))
* **examples:** refresh react tutorial app for v14 ([#3078](#3078)) ([86ada37](86ada37))
@stream-ci-bot
Copy link
Copy Markdown

πŸŽ‰ This PR is included in version 14.0.0-beta.5 πŸŽ‰

The release is available on:

Your semantic-release bot πŸ“¦πŸš€

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants